<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from 'echarts'
import { debounce } from '@/utils'
require('echarts/theme/macarons') // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    }

    // 监听侧边栏的变化
    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.__resizeHanlder)
    }

    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)

    this.chart.dispose()
    this.chart = null
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  methods: {
    setOptions({ expectedData, actualData } = {}) {
      var data = [
        ['06-01', 50000],
        ['06-02', 300000],
        ['06-03', 150000],
        ['06-04', 30000],
        ['06-05', 40000],
        ['06-06', 280000],
        ['06-07', 60000],
        ['06-08', 70000],
        ['06-09', 80000],
        ['06-10', 190000],
        ['06-11', 80000],
        ['06-12', 80000],
        ['06-13', 80000],
        ['06-14', 300000],
        ['06-15', 150000],
        ['06-16', 160000],
        ['06-17', 170000],
        ['06-18', 50000],
        ['06-19', 190000],
        ['06-20', 200000],
        ['06-21', 210000],
        ['06-22', 220000],
        ['06-23', 230000],
        ['06-24', 240000],
        ['06-25', 10000],
        ['06-26', 260000],
        ['06-27', 250000],
        ['06-28', 260000],
        ['06-29', 270000],
        ['06-30', 10000]
      ]

      var dateList = data.map(function(item) {
        // 月份
        return item[0]
      })
      var valueList = data.map(function(item) {
        // 金额
        return item[1]
      })
      console.log(dateList)
      console.log(valueList)
      this.chart.setOption({
        title: [
          {
            left: 'center',
            text: '交易金额(单位：万元)',
            textStyle: {
              // 设置主标题风格
              color: '#333333' // 设置主标题字体颜色
            }
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: dateList,
          splitNumber: dateList.length,
          nameTextStyle: {
            // 坐标轴名称的文字样式
            color: '#333333',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {
            // 坐标轴轴线相关设置。
            lineStyle: {
              color: '#333333'
            }
          }
        },
        yAxis: {
          // name: '交易金额',
          nameTextStyle: {
            color: '#333333',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          max: 300000,
          // min: 5,
          splitNumber: 7,
          axisLine: {
            lineStyle: {
              color: '#333333'
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '金额',
            data: valueList,
            type: 'line', // 类型为折线图
            barGap: '100',

            symbolSize: 5, // 设定实心点的大小
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: '#409EFF'
              },
              color: '#333333'
            },
            itemStyle: {
              // 圆点颜色
              normal: {
                color: '#005cbc',
                width: '5px',
                height: '5px'
              }
            }
          }
        ]
        // xAxis: {
        //   data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        //   boundaryGap: false,
        //   axisTick: {
        //     show: false
        //   }
        // },
        // grid: {
        //   left: 10,
        //   right: 10,
        //   bottom: 20,
        //   top: 30,
        //   containLabel: true
        // },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   padding: [5, 10]
        // },
        // yAxis: {
        //   axisTick: {
        //     show: false
        //   }
        // },
        // legend: {
        //   data: ['expected', 'actual']
        // },
        // series: [
        //   {
        //     name: 'expected',
        //     itemStyle: {
        //       normal: {
        //         color: '#FF005A',
        //         lineStyle: {
        //           color: '#FF005A',
        //           width: 2
        //         }
        //       }
        //     },
        //     smooth: true,
        //     type: 'line',
        //     data: expectedData,
        //     animationDuration: 2800,
        //     animationEasing: 'cubicInOut'
        //   },
        //   {
        //     name: 'actual',
        //     smooth: true,
        //     type: 'line',
        //     itemStyle: {
        //       normal: {
        //         color: '#3888fa',
        //         lineStyle: {
        //           color: '#3888fa',
        //           width: 2
        //         },
        //         areaStyle: {
        //           color: '#f3f8ff'
        //         }
        //       }
        //     },
        //     data: actualData,
        //     animationDuration: 2800,
        //     animationEasing: 'quadraticOut'
        //   }
        // ]
      })
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    }
  }
}
</script>
